<template>
  <div>
    <EvDrawer :drawer="drawer" :title="drawerTitle" size="45%" @handleClose="handleClose" @handleCancel="handleCancel" @handleConfirm="handleConfirm">
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" size="medium">
        <div class="partTitle">策略信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="策略名称" prop="code">
              <el-input v-model="form.code" placeholder="请输入策略编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="策略名称" prop="code">
              <el-input v-model="form.code" placeholder="请输入策略编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="策略类别" prop="code">
              <el-input v-model="form.code" placeholder="请输入策略编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="策略属性" prop="code">
              <el-input v-model="form.code" placeholder="请输入策略编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消息模板" prop="code">
              <el-input v-model="form.code" placeholder="请输入策略编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="resource">
              <el-radio-group v-model="form.resource">
                <el-radio label="启用"></el-radio>
                <el-radio label="禁用"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="策略说明">
              <el-input type="textarea" v-model="form.code" resize="none"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="partTitle">接受对象组</div>
        <EvTable ref="receiverGroupTable" :options="{data, columns,height:'300',toolbarConfig:{custom: false,slots: {buttons: 'toolbar_buttons'}}}" :showPage="false">
          <template #toolbar_buttons>
            <EvButton icon="el-icon-plus" type="primary" @click.prevent="handleAdd">添加</EvButton>
            <EvButton icon="el-icon-delete" type="danger" plain @click.prevent="handleDelete">删除</EvButton>
          </template>
        </EvTable>
      </el-form>
    </EvDrawer>

    <TablePageDetailCheckReceiverGroup ref="tablePageDetailCheckReceiverGroup" @handleCheckConfirm="handleCheckConfirm"></TablePageDetailCheckReceiverGroup>

  </div>
</template>
<script>
import TablePageDetailCheckReceiverGroup from "@/views/TablePageDetailCheckReceiverGroup.vue"
export default {
  props: {
    drawerTitle: {
      type: String,
      default: 'title'
    },
  },
  components: {
    TablePageDetailCheckReceiverGroup
  },
  data() {
    return {
      drawer: false,
      // 对象组表格
      data: [],
      columns: [
        { type: 'checkbox', fixed: 'left', align: 'center', width: 50 },
        { title: '序号', fixed: 'left', align: 'center', width: 60, type: 'seq' },
        { title: '对象组名称', field: 'groupName', align: 'left'},
        { title: '对象组编号', field: 'groupCode', align: 'left'},
      ],
      // 表单数据
      form: {
        code: null,
        resource: '启用',
      },
      rules: {
        code: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        resource: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
      }
    }
  },
  created() {

  },
  methods: {
    open() {
      this.drawer = true
    },
    handleAdd() {
      this.$refs.tablePageDetailCheckReceiverGroup.open()
    },
    handleDelete() {
      let selectRecords = this.$refs.receiverGroupTable.getSelectRecords()
      if (selectRecords.length > 0) {
        selectRecords.forEach(item => {
          let index = this.data.findIndex(el => el.id === item.id)
          if (index > -1) {
            this.data.splice(index, 1)
          }
        })
      } else {
        this.$message.warning('请选择')
      }
    },
    handleCancel() {
      this.drawer = false
    },
    handleClose() {
      this.drawer = false
    },
    handleConfirm() {
      this.$message.success('确认')
      this.drawer = false
    },
    handleCheckConfirm(selectRecords) {
      console.log(selectRecords);
      selectRecords.forEach(item => {
        if (this.data.findIndex(el => el.id === item.id) === -1) {
          this.data.push(item)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.partTitle {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 12px 0;
}
</style>